<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <link rel="stylesheet" href="../../css/style.css">
    <title></title>
    <style>
        .honor_box {
            width: 480px;
            height: 230px;
            overflow: hidden;
        }

        .swiper-slide, .swiper, .swiper-wrapper {
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            width: 170px;
            height: 230px;
            background: #fff;
            /*align-items: center;*/
            transition: 300ms;
            transform: scale(0.7411764705882353);
        }

        .swiper-slide-active, .swiper-slide-duplicate-active {
            transform: scale(1);
        }

        .swiper-slide {
            background-image: url("honor_img_border.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            padding: 10px;
            background-color: initial;
        }

        .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .show_title {
            /*font-family: youshebiaotihei;*/
            line-height: 39px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 18px;
            font-weight: 700;
            color: #fff;
            text-align: center;
            width: 212px;
            height: 39px;
            background-image: url("03_honor_title.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin: 10px auto 0;
        }
    </style>
</head>
<body style="overflow: hidden;">
<div class="honor_box">
    <div class="swiper" id="honorBox">
        <div class="swiper-wrapper" id="honorData">
        </div>
    </div>
</div>
<div class="show_title"></div>

</body>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script src="../../js/swiper.min.js"></script>
<script src="../../js/common.js"></script>
<script>

	var infoArr = []
	getJson('yjp_GSRY.json', {}, function (data) {
		let res = data.data;
		infoArr = res;
		for (var i = 0; i < res.length; i++) {
			$('#honorData').append(`<div class="swiper-slide">
                <img src="../../img/all/a${i+1}.jpg" alt="">
            </div>`)
		}
		new Swiper('#honorBox', {
			autoplay: true,//可选选项，自动滑动
			slidesPerView: 3,
			spaceBetween: -15,
			centeredSlides: true,
			loop: true,
			on: {
				slideChangeTransitionEnd() {
					$('.show_title').text(infoArr[this.realIndex].synopsis)
				}
			}
		})
	})


</script>
</html>
